import { UploadOutlined } from "@ant-design/icons";
import styled from "@emotion/styled";
import { Button, Drawer, Form, Input, Modal, Spin, Upload } from "antd";
import { useForm } from "antd/lib/form/Form";
import TextArea from "antd/lib/input/TextArea";
/*
 * @Descripttion: 创建项目弹窗
 * @Author: 毕怀智
 * @Date: 2021-12-29 20:57:13
 * @Function: 用于创建项目，基于antd-Drawer组件
 */

import React, { useEffect } from "react";

import { useAddProject, useEditProject } from "api/Projects";
import { ErrorBox } from "components/FullError";
import { UserSelect } from "components/UserSelect";

import { useProjectModal, useProjectsQueryKey } from "../utils";

const ProjectModal = () => {
  const {
    projectModalOpen,
    closeModal,
    editingProject,
    isLoading,
  } = useProjectModal();

  const useMutateProject = editingProject ? useEditProject : useAddProject;
  const { mutateAsync, error, isLoading: mutateLoading } = useMutateProject(
    useProjectsQueryKey()
  );
  const [form] = useForm();
  const onFinish = (values: any) => {
    mutateAsync({ ...editingProject, ...values }).then(() => {
      form.resetFields();
      closeModal();
    });
  };

  const title = editingProject ? "编辑项目" : "创建项目";

  useEffect(() => {
    form.setFieldsValue(editingProject);
  }, [editingProject, form]);

  const close = () => {
    closeModal();
    form.resetFields();
  };

  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
  };

  return (
    <Modal
      forceRender={true}
      onCancel={close}
      visible={projectModalOpen}
      // width={"100%"}
      footer={null}
    >
      {isLoading ? (
        <div style={{ textAlign: "center" }}>
          <Spin size={"default"} tip="Loading..." />
        </div>
      ) : (
        <>
          <h3>{title}</h3>
          <ErrorBox error={error} />
          <Form
            form={form}
            // layout={"vertical"}
            // style={{ width: "40rem" }}
            {...layout}
            onFinish={onFinish}
            // size='large'
          >
            <Form.Item
              label={"名称"}
              name={"name"}
              rules={[{ required: true, message: "请输入项目名" }]}
              style={{ marginTop: 15, marginBottom: 30 }}
            >
              <Input placeholder={"请输入项目名称"} />
            </Form.Item>

            <Form.Item
              label={"部门"}
              name={"organization"}
              rules={[{ required: true, message: "请输入部门名" }]}
              style={{ marginTop: 5, marginBottom: 30 }}
            >
              <Input placeholder={"请输入部门名"} />
            </Form.Item>

            <Form.Item label={"负责人"} name={"personId"}>
              <UserSelect defaultValues="负责人" />
            </Form.Item>

            <Form.Item label={"备注"} name={"text"}>
              <TextArea />
            </Form.Item>
            <Form.Item style={{ textAlign: "right", marginRight: -200 }}>
              <Button
                loading={mutateLoading}
                type={"primary"}
                htmlType={"submit"}
              >
                提交
              </Button>
            </Form.Item>
          </Form>
        </>
      )}
    </Modal>
  );
};

const Container = styled.div`
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;

export default ProjectModal;
